<template>
    <div class="Photo" >
        <!-- <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper"> -->
            <!-- <div class="menu-container" ref="menuContainer">     -->
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted photo-span">
            <div class="mui-scroll" >
                <span class="mui-control-item"  @click="abb(index)"  v-for="(item,index) in list" :class="index==x?'mui-active':''" :key="item.id" :ref="'click'+index" >
                    {{item.name}}
                    <!-- 女明星 -->
                </span>
                <!-- <span class="mui-control-item" @click="abb('/HomePage/PhotoSharing2')">
                    香港女明星
                </span>
                <span class="mui-control-item" @click="abb('/HomePage/PhotoSharing3')">
                    台湾女明星
                </span>
                <span class="mui-control-item" @click="abb('/HomePage/PhotoSharing4')">
                    懂车帝
                </span>
                <span class="mui-control-item" @click="abb('/HomePage/PhotoSharing5')">
                    科技
                </span>
                <span class="mui-control-item" @click="abb('/HomePage/PhotoSharing6')">
                   体育
                </span> -->
            </div>
        </div>    
        <!-- <ul class="photo-ul" id="photo-ul">
            <li class="photo-li" v-for="item in photo" :key="item.id">
                <img class="leftImage" v-lazy="item.src" @click="acc(item)">
                <div class="photo-content" v-text="item.brief">
                    
                </div>
            </li>
        </ul>        -->
        <div class="photo-ul1" id="photo-ul1">
            <mt-loadmore 
                :bottom-method="loadBottom" 
                @bottom-status-change="handleBottomChange" 
                ref="loadmore" 
                :autoFill="false"
                :bottomPullText="text" 
                :bottomDropText="hintText" 
            >
                <ul class="photo-ul" id="photo-ul">
                    <li class="photo-li" v-for="item in photo" :key="item.id">
                        <img class="leftImage" v-lazy="item.src" @click="acc(item)">
                        <div class="photo-content" v-text="item.brief">
                            
                        </div>
                    </li>
                </ul>       
            </mt-loadmore>
       </div>
    </div>
</template> 

<script>
import { Toast } from 'mint-ui';
import mui from '../../../lib/MUI/js/mui.min.js';
import mui1 from '../../../lib/MUI/js/mui.zoom.js';
import mui2 from '../../../lib/MUI/js/mui.previewimage.js';
import mui3 from '../../../lib/MUI/css/mui.min.css'
export default {  
     data(){
        return{
          list:[],
          photo:[],
          li:'',
          text : "加载更多",
          hintText: "释放更新",
        //   current: "",
          pageNo: 2,
          x: localStorage.getItem("click1")
                 
        }
    },
    methods:{
        
         // 下拉状态改变时，
      handleBottomChange(status) {
        this.bottomStatus = status
      },
      loadBottom() {
       this.$http.post('http://192.168.0.197:88/getImgs', {
            belongId : this.li,
            pageNo: this.pageNo++,
            pageSize: 5
          }, {emulateJSON:true}).then(res => {
              
            if (res.data.data.length > 0) {
              res.data.data.forEach(item => this.photo.push(item));
              console.log(this.list)
            } else {
            //   this.text = "到底了";
            //   this.hintText = "到底了";
              Toast({
                message: '没有更多啦~',
                position: 'bottom',
                duration: 3000
              });
            }
            this.$refs.loadmore.onBottomLoaded();
          }, err => console.error(err));
      },

        ///////////////
        chaoliangjie(){
             this.$http.post(this.url+'getImgs',{belongId:this.li,pageNo:"1",pageSize:"5"},{emulateJSON:true}).then(function(res){
                    this.photo = res.body.data;  
            },function(res){
                    console.log(res.status);
            });
        },
        abb(a){
          
            this.li = this.list[a].id
            this.chaoliangjie()
            localStorage.setItem("click1",a)
        },
        
        acc(item){
            this.$router.push({name:"photodetails",params:{item}});
        },
       
    },

    mounted(){
        mui.previewImage();
        mui('.mui-scroll-wrapper').scroll({
	    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
        
        this.$http.post(this.url+'getImgNavigate').then(function(res){
            // console.log(res); 
                this.list= res.body.data;  
                if(!localStorage.getItem("click1")){
                    this.li = this.list[0].id; 
                }else{
                    this.li = this.list[localStorage.getItem("click1")].id; 
                 
                }
             
                
                this.chaoliangjie()
            });
       

        
    },
         
    // watch:{
    //     list(to,from){
    //               this.$nextTick(() => {
    //                  this.abb(this.list[0].id);
    //           })

    //     }
    // }
       
}

</script>

<style scoped>
    *{
        list-style: none;
        padding: 0;
        
        
    }
    img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    .photo-ul{
        /* width: 90%; */
        margin: auto;
       
    }
    .photo-li{
        position: relative;
        text-align: center;
        
    }
    img[lazy=loaded] {
        width: 100%;
        height: 100%;    
    }
    .photo-content{
        width: 100%;
        height: 100px;
        position:absolute;
        bottom: 0;
        background: rgba(000, 000, 000, 0.2);
        color:white;
 
    }
    .photo-span{
        background-color: white;
    }
    *{
        list-style: none;
        padding: 0;
        
        
    }
    /* img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    } */
    .photo-ul{
        width: 100%;
        margin: auto;
        
    }
    .photo-li{
        position: relative;
        text-align: center;
        height: auto;
        margin-bottom: 10px;
        
    }
    img[lazy=loaded] {
        width: 100%;
        height: 100%;    
    }
    /* .photo-li img{
        
        
    } */
     .photo-content{
        width: 100%;
        /* height: 100px; */
        height:80px;
        position:absolute;
        bottom: 0;
        background: rgba(000, 000, 000, 0.2);
        color:white;
        overflow: hidden;
 
    }
    .photo-span{
        background-color: white;
    } 
    /* .photo-li:last-child{
        margin-bottom: 50px
    } */
    
</style>